<template>
  <!-- 底部导航 -->
  <div>
    <van-tabbar v-model="active" active-color="#ff5f16" inactive-color="#000" @change="changeTab">
      <van-tabbar-item>
          <van-icon class="iconfont icon-dianying" slot="icon" size="20"></van-icon>
          <span>电影</span>
      </van-tabbar-item>
      <van-tabbar-item>
          <van-icon class="iconfont icon-yingyuan" slot="icon" size="20"></van-icon>
          <span>影院</span>
      </van-tabbar-item>
      <!-- <van-tabbar-item>
          <van-icon class="iconfont icon-zixun" slot="icon" size="20"></van-icon>
          <span>资讯</span>
      </van-tabbar-item> -->
      <van-tabbar-item>
          <van-icon class="iconfont icon-wode" slot="icon" size="20"></van-icon>
          <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, Icon} from "vant";
import "@/assets/iconfont/iconfont.css"

Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon);
// 逻辑部分
export default {
  data() {
    return {
      active: 0,
      url:[
          "/films/nowPlaying",
          "/cinemas",
          "/center"
      ]
    };
  },
  methods:{
      changeTab(index){
          this.$router.push(this.url[index])
      }
  },
  created(){
      let path = this.$route.path;
      let index = this.url.indexOf(path);
      this.active = path === "/films/comingSoon" ? 0:index;

  }
};
</script>

<style scoped>
/* 样式部分 */
</style>